<template>
  <n-drawer v-model:show="isDrawer" :width="width" :auto-focus="false" @after-leave="handleReset">
    <n-drawer-content :title="title" closable>
      <n-form
        :model="formParams"
        :rules="rules"
        ref="formRef"
        label-placement="left"
        :label-width="100"
      >
        <n-form-item label="生成数量" path="num">
          <n-input placeholder="请输入生成数量" v-model:value="formParams.num" />
        </n-form-item>

        <n-form-item label="二维码前缀" path="prefix">
          <n-input placeholder="请输入二维码前缀" v-model:value="formParams.prefix" />
        </n-form-item>
        <n-form-item label="类型" path="type">
          <n-select clearable placeholder="请选择类型" v-model:value="formParams.type" label-field="name" value-field="id" :options="deviceTypeAll" @update:value="chargerTypeChange"/>
        </n-form-item>

        <!-- <n-form-item label="导出格式" path="exportformat">
          <n-radio-group v-model:value="formParams.exportformat" name="exportformat">
            <n-space>
              <n-radio :key="1" :value="1">图片</n-radio>
              <n-radio :key="2" :value="2">excel</n-radio>
              <n-radio :key="3" :value="3">图片和excel</n-radio>
            </n-space>
          </n-radio-group>
        </n-form-item> -->

        <!-- <n-form-item label="归属代理商">
          <n-input placeholder="请选择归属代理商" disabled v-model:value="agentName" />
          <n-button type="primary" @click="handleAgent" ghost>
            选择代理商
          </n-button>
        </n-form-item> -->

      </n-form>

      <template #footer>
        <n-space>
          <n-button @click="handleReset">重置</n-button>
          <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
        </n-space>
      </template>

      <n-modal v-model:show="showModal">
        <n-card
          style="width: 600px"
          title="选择代理商"
          :bordered="false"
          size="huge"
          role="dialog"
          aria-modal="true"
        >
          <!-- <template #header-extra>
            噢！
          </template> -->
          <n-table :bordered="false" :single-line="false">
            <thead>
            <tr>
              <th>代理商名称</th>
              <th>代理商账号</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="(item,index) in agentAll" :key="index">
              <td>{{item.nickname}}</td>
              <td>{{item.username}}</td>
              <td><n-button type="primary" @click="selectAgent(item)">选择</n-button></td>
            </tr>
          </tbody>
          </n-table>
          <!-- <template #footer>
            尾部
          </template> -->
        </n-card>
      </n-modal>

    </n-drawer-content>
  </n-drawer>
</template>

<script lang="ts" setup>
  import { ref, onMounted, computed } from 'vue';
  import { useMessage, FormRules } from 'naive-ui';
  import type { formParamsType } from './types';
  import { useDictionary } from '@/hooks/web/useDictionary';

  import { getallagentList } from '@/api/system/user';

  import { qrcodeadd } from '@/api/device/qrcode';

  import { addType, editType, typeInfo } from '@/api/device/type';

  const rules: FormRules = {
    name: {
      required: true,
      message: '设备类型名称不能为空',
      trigger: 'blur',
    }
  };

  const emit = defineEmits(['change']);
  const { getDictTypeList } = useDictionary();

  const props = defineProps({
    title: {
      type: String,
      default: '添加二维码',
    },
    width: {
      type: Number,
      default: 850,
    },
    roleList: {
      type: Array,
    },
  });

  const defaultValueRef = () => ({
    id: null,
    num: '',
    prefix: '',
    type: 1
  });

  const showModal = ref(false);
  const message = useMessage();
  const formRef: any = ref(null);
  const isDrawer = ref(false);
  const subLoading = ref(false);
  const agentAll = ref([]);

  const agentName = ref('');

  const formParams = ref<formParamsType>(defaultValueRef());

  const deviceTypeAll = ref([
    {
      id: 1,
      name: '充电宝'
    },
    {
      id: 2,
      name: '充电盒'
    },
    {
      id: 3,
      name: '充电线'
    }
  ]);

  // function handleUpdateValue(value:(string | number)[]){
  //   console.log("选中的多选框");
  //   console.log(value);
  //   cities.value = value;
  //   formParams.value.cities = value;
  // }
  

  function chargerTypeChange(e){
    formParams.type = e;
  }

  function handleAgent(){
    showModal.value = true;
  }

  async function openDrawer(id?) {
    if (id) {
      formParams.value.id = id;
      getInfo();
      return;
    }
    isDrawer.value = true;
  }

  function closeDrawer() {
    isDrawer.value = false;
  }

  function formSubmit() {
    formRef.value.validate((errors) => {
      if (!errors) {
        const msg = '成功';
        // if (formParams.value.id) {
        //   editType(formParams.value).then((_) => {
        //     message.success(msg);
        //     emit('change');
        //     handleReset();
        //     closeDrawer();
        //   });
        // } else {
          qrcodeadd(formParams.value).then((_) => {
            message.success(msg);
            emit('change');
            handleReset();
            closeDrawer();
          });
        // }
      } else {
        message.error('请填写完整信息');
      }
    });
  }

  function handleReset() {
    formRef.value.restoreValidation();
    formParams.value = Object.assign(formParams.value, defaultValueRef());
  }

  function getInfo() {
    typeInfo({ id: formParams.value.id }).then((res) => {
      const params = {
        id: formParams.value.id,
        name: res.name,
      };

      formParams.value = Object.assign(formParams.value, params);
      isDrawer.value = true;
    });
  }

  function selectAgent(item){
    //代理商id
    // formParams.value.operators = item.id;
    //代理商名称
    agentName.value = item.nickname;
    showModal.value = false;
  }

  onMounted(async () => {
    // console.log("查询一下所有的门店");
    // console.log(stationAll.value);
    // var deviceTypeList = await getDeviceTypeList();

    //查询一下所有的代理商
    var agentAll1 = await getallagentList({});

    agentAll.value = agentAll1;


  });

  defineExpose({
    openDrawer,
    closeDrawer,
  });
</script>
